﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Menu</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />

    
    <script src="../../scripts/boot.js" type="text/javascript"></script>

    <style type="text/css">
    .mymenu .mini-menu-float
    {
        float:right;
    }
    </style>
    
</head>
<body>
    <h1>MenuBar 菜单</h1>
    


<h4>Url加载</h4>
<ul id="menu1" class="mini-menubar" style="width:100%;"
    url="../data/listMenu.txt" idField="id" parentField="pid">
</ul>

<br /><br /><br /><br />

<h4>HTML创建</h4>
<ul id="menu2" class="mini-menubar mymenu" style="width:100%;">
    <li>
		<span >文件(F)</span>
		<ul>
		    <li onclick="onItemClick">
		        <span >新建</span>
		        <ul>
                    <li iconCls="icon-new" onclick="onItemClick">文件</li>
		            <li onclick="onItemClick">项目</li>
                    <li onclick="onItemClick">网站</li>
		        </ul>
            </li>
            <li class="separator"></li>
			<li iconCls="icon-cut" onclick="onItemClick">Cut</li>
	        <li iconCls="icon-add" onclick="onItemClick">Add</li>
            <li iconCls="icon-remove" onclick="onItemClick">Close</li>
		</ul>
	</li>
    <li class="separator"></li>
	<li >编辑(E)</li>
	<li  onclick="onItemClick">查看(V)</li>
    <li iconCls="icon-help" onclick="onItemClick">帮助(H)</li>
</ul>



    
    <script type="text/javascript">
        mini.parse();
        function onItemClick(e) {
            var item = e.sender;
            alert(item.getText());
            
        }
    </script>

    <div class="description">
        <h3>Description</h3>
        <p>MiniUI Menu可以横向、竖向显示菜单项。            
        </p>
        <p>子菜单项可以无限级嵌套子菜单。</p>
    </div>
</body>
</html>